<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人事管理系统 - 登录</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入自定义CSS -->
    <link th:href="@{/css/login.css}" rel="stylesheet">
</head>
<body class="login-page">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-5">
                <div class="login-box">
                    <div class="login-logo">
                        <h1>人事管理系统</h1>
                        <p class="text-muted">请登录您的账号</p>
                    </div>
                    
                    <div th:if="${param.error}" class="alert alert-danger">
                        用户名或密码错误
                    </div>
                    
                    <div th:if="${param.logout}" class="alert alert-success">
                        您已成功登出
                    </div>
                    
                    <form th:action="@{/users/login}" method="post">
                        <div class="mb-3">
                            <label for="username" class="form-label">用户名</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
                                <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <label for="password" class="form-label">密码</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
                                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required>
                            </div>
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button type="submit" id="loginBtn" class="btn btn-primary btn-login">登录</button>
                        </div>
                    </form>
                    
                    <div class="login-footer">
                        <p>© 2023 人事管理系统 版权所有</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap图标 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!-- 引入jQuery和Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> 